<html lang="en">

<head>
    <title>flow.ci</title>
    <style>
        .content {
            background-color: #ffffff;
            max-width: 800px;
            margin: 0 auto;
        }

        .left {
            display: inline-block;
            text-align: left;
            height: 100%;
        }

        .right {
            display: inline-block;
            text-align: right;
            height: 100%;
        }

        table tr {
            vertical-align: top;
            height: 30px;
        }

        table tr td:nth-child(1) {
            color: #505a62;
            font-size: 14px;
            width: 80px;
        }

        table tr td:nth-child(2) {
            padding-left: 20px;
            color: #869096FF;
            font-size: 14px;
        }

        .state-success-bk {
            background-color: #66BB6A !important;
        }

        .state-success-fk {
            color: #66BB6A !important;
        }

        .state-failure-bk {
            background-color: #E53935 !important;
        }

        .state-failure-fk {
            color: #E53935 !important;
        }

        .state-cancelled-bk {
            background-color: #B0BEC5 !important;
        }

        .state-cancelled-fk {
            color: #B0BEC5 !important;
        }

        .state-timeout-bk {
            background-color: #FB8C00 !important;
        }

        .state-timeout-fk {
            color: #FB8C00 !important;
        }

        .button {
            background-color: #4c61c8;
            border: none;
            color: white;
            padding: 15px 80px;
            text-align: center;
            text-decoration: none;
            display: inline-block;
            font-size: 16px;
            margin: 4px 2px;
            cursor: pointer;
        }

        .div-line {
            height: 1px;
            background-color: #E0E0E0;
            margin-top: 10px;
            margin-bottom: 10px
        }
    </style>
</head>

<body class="content">

<div th:if="${FLOWCI_JOB_STATUS} == 'SUCCESS'" style="height: 10px" class="state-success-bk"></div>
<div th:if="${FLOWCI_JOB_STATUS} == 'FAILURE'" style="height: 10px" class="state-failure-bk"></div>
<div th:if="${FLOWCI_JOB_STATUS} == 'CANCELLED'" style="height: 10px" class="state-cancelled-bk"></div>
<div th:if="${FLOWCI_JOB_STATUS} == 'TIMEOUT'" style="height: 10px" class="state-timeout-bk"></div>

<div style="margin-left: 15px; margin-right: 15px">

    <!--  status header  -->
    <div th:if="${FLOWCI_JOB_STATUS} == 'SUCCESS'" class="state-success-fk" style="height: 70px;">
        <div class="left" style="width: 50%">
            <h1>Build Success</h1>
        </div>
        <div class="right" style="width: 45%">
            <h1>
                <svg style="width:36px;height:36px" viewBox="0 0 24 24">
                    <path fill="currentColor"
                          d="M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z"/>
                </svg>
            </h1>
        </div>
    </div>

    <div th:if="${FLOWCI_JOB_STATUS} == 'FAILURE'" class="state-failure-fk" style="height: 70px;">
        <div class="left" style="width: 50%">
            <h1>Build Failed</h1>
        </div>
        <div class="right" style="width: 45%">
            <h1>
                <svg style="width:36px;height:36px" viewBox="0 0 24 24">
                    <path fill="currentColor"
                          d="M20 6.91L17.09 4L12 9.09L6.91 4L4 6.91L9.09 12L4 17.09L6.91 20L12 14.91L17.09 20L20 17.09L14.91 12L20 6.91Z"/>
                </svg>
            </h1>
        </div>
    </div>

    <div th:if="${FLOWCI_JOB_STATUS} == 'CANCELLED'" class="state-cancelled-fk" style="height: 70px;">
        <div class="left" style="width: 50%">
            <h1>Build Cancelled</h1>
        </div>
        <div class="right" style="width: 45%">
            <h1>
                <svg style="width:36px;height:36px" viewBox="0 0 24 24">
                    <path fill="currentColor"
                          d="M12 2C17.5 2 22 6.5 22 12S17.5 22 12 22 2 17.5 2 12 6.5 2 12 2M12 4C10.1 4 8.4 4.6 7.1 5.7L18.3 16.9C19.3 15.5 20 13.8 20 12C20 7.6 16.4 4 12 4M16.9 18.3L5.7 7.1C4.6 8.4 4 10.1 4 12C4 16.4 7.6 20 12 20C13.9 20 15.6 19.4 16.9 18.3Z"/>
                </svg>
            </h1>
        </div>
    </div>

    <div th:if="${FLOWCI_JOB_STATUS} == 'TIMEOUT'" class="state-timeout-fk" style="height: 70px;">
        <div class="left" style="width: 50%">
            <h1>Build Timeout</h1>
        </div>
        <div class="right" style="width: 45%">
            <h1>
                <svg style="width:36px;height:36px" viewBox="0 0 24 24">
                    <path fill="currentColor"
                          d="M11 7V13L16.2 16.1L17 14.9L12.5 12.2V7H11M20 12V18H22V12H20M20 20V22H22V20H20M18 20C16.3 21.3 14.3 22 12 22C6.5 22 2 17.5 2 12S6.5 2 12 2C16.8 2 20.9 5.4 21.8 10H19.7C18.8 6.6 15.7 4 12 4C7.6 4 4 7.6 4 12S7.6 20 12 20C14.4 20 16.5 18.9 18 17.3V20Z"/>
                </svg>
            </h1>
        </div>
    </div>

    <!-- flow info -->
    <table style="height: 60px">
        <tr>
            <td style="width: 5px">
                <div th:if="${FLOWCI_JOB_STATUS} == 'SUCCESS'" style="height: 50px" class="state-success-bk"></div>
                <div th:if="${FLOWCI_JOB_STATUS} == 'FAILURE'" style="height: 50px" class="state-failure-bk"></div>
                <div th:if="${FLOWCI_JOB_STATUS} == 'CANCELLED'" style="height: 50px" class="state-cancelled-bk"></div>
                <div th:if="${FLOWCI_JOB_STATUS} == 'TIMEOUT'" style="height: 50px" class="state-timeout-bk"></div>
            </td>
            <td>
                <div style="font-size: 16px; color: #505a62">
                    <div>ios-flow #10</div>
                    <div style="margin-top: 8px">
                        <svg style="width:14px;height:14px" viewBox="0 0 24 24">
                            <path fill="currentColor"
                                  d="M12,20A7,7 0 0,1 5,13A7,7 0 0,1 12,6A7,7 0 0,1 19,13A7,7 0 0,1 12,20M12,4A9,9 0 0,0 3,13A9,9 0 0,0 12,22A9,9 0 0,0 21,13A9,9 0 0,0 12,4M12.5,8H11V14L15.75,16.85L16.5,15.62L12.5,13.25V8M7.88,3.39L6.6,1.86L2,5.71L3.29,7.24L7.88,3.39M22,5.72L17.4,1.86L16.11,3.39L20.71,7.25L22,5.72Z"/>
                        </svg>
                        100s
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <div class="div-line"></div>

    <table>
        <tr>
            <td>Trigger:</td>
            <td>[[${FLOWCI_JOB_TRIGGER}]]</td>
        </tr>
        <tr>
            <td>Triggered By:</td>
            <td>[[${FLOWCI_JOB_TRIGGER_BY}]]</td>
        </tr>
        <tr>
            <td>Start At:</td>
            <td>[[${FLOWCI_JOB_START_AT}]]</td>
        </tr>
        <tr>
            <td>Finish At:</td>
            <td>[[${FLOWCI_JOB_FINISH_AT}]]</td>
        </tr>
        <tr>
            <td>Agent:</td>
            <td>not_supported_yet</td>
        </tr>
    </table>

    <div class="div-line"></div>

    <!-- Git Push/Tag -->
    <table th:if="${FLOWCI_JOB_TRIGGER} == 'PUSH' or ${FLOWCI_JOB_TRIGGER} == 'TAG'">
        <tr>
            <td>Branch:</td>
            <td>[[${FLOWCI_GIT_BRANCH}]]</td>
        </tr>
        <tr>
            <td>Commits:</td>
            <td>
                <table>
                    <tr>
                        <td><a th:href="${FLOWCI_GIT_COMMIT_URL}" target="_blank">[[${FLOWCI_GIT_COMMIT_ID}]]</a></td>
                        <td>[[${FLOWCI_GIT_COMMIT_MESSAGE}]]</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <!-- Git PR Open/Close -->
    <table th:if="${FLOWCI_JOB_TRIGGER} == 'PR_OPENED' or ${FLOWCI_JOB_TRIGGER} == 'PR_MERGED'">
        <tr>
            <td>Title:</td>
            <td><a th:href="${FLOWCI_GIT_PR_URL}" target="_blank">[[${FLOWCI_GIT_PR_TITLE}]]</a></td>
        </tr>
        <tr>
            <td>Number:</td>
            <td>#[[${FLOWCI_GIT_PR_NUMBER}]]</td>
        </tr>
        <tr>
            <td>Message:</td>
            <td>[[${FLOWCI_GIT_PR_MESSAGE}]]</td>
        </tr>
        <tr>
            <td>Time:</td>
            <td>[[${FLOWCI_GIT_PR_TIME}]]</td>
        </tr>
        <tr>
            <td>To:</td>
            <td>[[${FLOWCI_GIT_PR_BASE_REPO_NAME}]]/[[${FLOWCI_GIT_PR_BASE_REPO_BRANCH}]]</td>
        </tr>
        <tr>
            <td>From:</td>
            <td>[[${FLOWCI_GIT_PR_HEAD_REPO_NAME}]]/[[${FLOWCI_GIT_PR_HEAD_REPO_BRANCH}]]</td>
        </tr>
    </table>

    <div class="div-line"></div>

    <!-- Detail Button -->
    <div style="text-align: center">
        <form action="https://www.google.com" target="_blank">
            <button class="button" type="submit">View the details</button>
        </form>
    </div>

</div>
</body>
</html>